<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <!-- View -->
    <div id="app">
      <!-- v-bind绑定数据：让我们的值是动态绑定的（不是写死的） -->
      <!-- <img v-bind:src="img_url" alt="" /> -->

      <!-- v-bind: 可以简写成 : -->
      <img :src="img_url" alt="" />

      <!-- 事件绑定是v-on: 简写 @ -->
      <button v-on:click="changeOne">换一个</button>&nbsp;
      <p>{{ msg }}</p>
      <p>
        <button @click="changeMsg('black pink','少女时代')">change msg</button>
      </p>
      <p>
        <!-- $event 是事件绑定时，传递事件对象的固定写法 -->
        <button @click="changeMsg2(123,$event)">change event</button>
      </p>
    </div>

    <script>
      //   ViewModel
      new Vue({
        el: '#app',
        data: {
          img_url:
            'https://img1.baidu.com/it/u=2236572226,1780107877&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=721',
          msg: 'hello world'
        },
        methods: {
          changeOne() {
            // console.log('---changeOne---')
            // 这里的this，就是创建出来的实例（Vue2才有实例，Vue2面向对象编程）
            // 改了模型的值，视图会自动更新【数据驱动视图】
            this.img_url =
              'https://img1.baidu.com/it/u=1509652310,715486802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
          },
          changeMsg(value, value2) {
            this.msg = value + value2
          },
          changeMsg2(value, e) {
            console.log(value, e)
          }
        }
      })
    </script>
  </body>
</html>
